<template>
  <div class="local-preview-container">
    <!-- PDF预览 -->
    <div v-if="fileType === 'pdf'" class="pdf-container">
      <object
        :data="fileUrl"
        type="application/pdf"
        class="pdf-viewer"
      >
        <p>您的浏览器无法显示PDF，请 <a :href="fileUrl" target="_blank">下载PDF</a> 查看。</p>
      </object>
    </div>
    
    <!-- 文本文件预览 (TXT) -->
    <div v-else-if="fileType === 'txt'" class="text-container">
      <pre v-if="fileContent" class="text-content">{{ fileContent }}</pre>
      <div v-else class="loading-text">加载文本内容中...</div>
    </div>
    
    <!-- Markdown预览 -->
    <div v-else-if="fileType === 'markdown' || fileType === 'md'" class="markdown-container">
      <MdPreview 
        v-if="fileContent" 
        :modelValue="fileContent" 
        previewOnly
        :editorId="editorId"
        :toolbars="[]"
        preview-theme="github"
        code-theme="github"
        :noMermaid="false"
        :noKatex="false"
        :noIcons="true"
        style="border: none;"
      />
      <div v-else class="loading-text">加载Markdown内容中...</div>
    </div>
    
    <!-- Word文档预览 (使用替代方案) -->
    <div v-else-if="['doc', 'docx'].includes(fileType)" class="word-container">
      <div class="document-info">
        <h3>{{ fileName }}</h3>
        <p>Word文档无法在浏览器中直接预览，请下载后查看。</p>
        <button class="download-btn" @click="$emit('download')">下载文档</button>
      </div>
    </div>
    
    <!-- 不支持的文件类型 -->
    <div v-else class="unsupported-container">
      <p>当前文件类型无法在本地预览模式下显示。</p>
      <button class="download-btn" @click="$emit('download')">下载文件</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const props = defineProps({
  fileUrl: {
    type: String,
    required: true
  },
  fileName: {
    type: String,
    default: '未命名文件'
  },
  fileType: {
    type: String,
    required: true
  },
  fileContent: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['download']);

// 生成唯一的编辑器ID
const editorId = computed(() => `local-preview-md-${Date.now()}`);
</script>

<style scoped>
.local-preview-container {
  width: 100%;
  height: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f5f5;
}

.pdf-container, .text-container, .markdown-container, .word-container, .unsupported-container {
  width: 100%;
  height: 100%;
  min-height: 70vh;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  overflow: auto;
}

.pdf-viewer {
  width: 100%;
  height: 100%;
  min-height: 70vh;
}

.text-content {
  white-space: pre-wrap;
  font-family: monospace;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
  overflow: auto;
}

/* Markdown样式 */
.markdown-container :deep(.md-editor) {
  height: 100%;
  min-height: 100vh;
  border: 0 !important;
  display: flex;
}

.markdown-container :deep(.md-editor-content) {
  margin-left: 0 !important;
  display: flex;
  min-height: 100vh;
  width: 100% !important;
}

.markdown-container :deep(.md-editor-input) {
  display: none !important;
}

.markdown-container :deep(.md-editor-preview) {
  width: 100% !important;
  min-height: 100vh;
  border-left: none !important;
}

.markdown-container :deep(.md-editor-preview-wrapper) {
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.document-info {
  text-align: center;
  padding: 40px 20px;
}

.loading-text {
  text-align: center;
  padding: 40px;
  color: #909399;
}

.download-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.download-btn:hover {
  background-color: #66b1ff;
}

@media (max-width: 768px) {
  .local-preview-container {
    padding: 10px;
    min-height: 60vh;
  }
  
  .pdf-container, .text-container, .markdown-container, .word-container, .unsupported-container {
    min-height: 50vh;
  }
  
  .markdown-container :deep(.md-editor),
  .markdown-container :deep(.md-editor-content),
  .markdown-container :deep(.md-editor-preview) {
    min-height: 50vh;
  }
}
</style> 